<template>
    <div class="login-container">
        <el-form class="login-form" :model="loginForm" :rules="loginRules" ref="loginFormRef">
            <h2 class="title">欢迎登录</h2>

            <!-- 用户名输入框 -->
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"
                    clearable></el-input>
            </el-form-item>

            <!-- 密码输入框 -->
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" prefix-icon="el-icon-lock"
                    show-password></el-input>
            </el-form-item>

            <!-- 登录按钮 -->
            <el-form-item>
                <el-button type="primary" @click="handleLogin" class="login-btn">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            loginForm: {
                username: 'cxk',
                password: '123456'
            },
            loginRules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        ...mapMutations(['setUser']),
        handleLogin() {
            this.$refs.loginFormRef.validate(valid => {
                if (valid) {
                    //AXIOS
                    this.axios({
                        method: 'get',
                        url: 'Sign',
                        params: {
                            loginname: this.loginForm.username,
                            loginpwd: this.loginForm.password
                        }
                    }).then(res => {
                        if (res.status == 200) {
                            console.log('res.data: ', res.data);
                            if (res.data.code > 0) {
                                //登录成功后保存用户数据 包括 Token
                                this.$notify({
                                    title: '提示',
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.setUser(res.data.data);
                                sessionStorage.setItem("token", res.data.data.Token);
                                this.$router.push('/');

                            } else {
                                this.$notify.error({
                                    title: '提示',
                                    message: res.data.msg
                                });
                            }
                        }
                    }).catch(err => {
                        console.log('err: ', err);
                        this.$notify.error({
                            title: '提示',
                            message: err.message,
                            
                        });
                    });
                } else {
                    this.$notify.error({
                        title: '提示',
                        message: '请填写完整信息'
                    });
                    return false;
                }
            });
        }
    }
};
</script>


<style scoped>
.login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-form {
    width: 400px;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 30px;
    color: #409EFF;
}

.login-btn {
    width: 100%;
    margin-top: 10px;
    letter-spacing: 2px;
}
</style>
